<template>
    <div class="index">
        <navs/>
        <background/>

        <div class="news">
            <div class="part_title center">
                <p class="chinese">新闻公告</p>
                <p class="english">NEWS ANNOUNCEMENT</p>
                <div class="separator"></div>
            </div>

            <el-row type="flex" justify="center" v-if="news.length != 0">
                <el-col :span="5" v-for="(item,index) in news" :key="index" style="padding:0 10px">
                    <div class="single_new">
                        <div>
                            <p class="ntitle">{{item.news_title}}</p>
                            <p class="ncontent">{{item.news_content.slice(0,19)+"..."}}</p>
                            <div class="flex space_between">
                                <div>
                                    <img src="@/assets/news_time.png" alt=""  class="time">
                                    <span>{{item.news_date}}</span>
                                </div>
                                <img src="@/assets/right_arrow_white.png" alt="" class="right_arrow">
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div class="switch">
                <img src="@/assets/left_arrow.png" alt="" @click="switchNews(0)">
                <img src="@/assets/right_arrow.png" alt="" @click="switchNews(1)">
            </div>
        </div>
        
        <div class="achievement">
            <div class="part_title center">
                <p class="chinese">科研成果</p>
                <p class="english">ACHIEVEMENTS</p>
                <div class="separator"></div>
            </div>
            <el-row type="flex" justify="center" v-if="achievements.length != 0">
                <el-col :span="5">
                    <el-row  v-for="(item,index) in achievements" :key="index" >
                        <div class="single_achievement space_between" :style="detail_n === index ? 'background:#2973F1;':''"
                            @mouseover="switchADetail(1,index)" @mouseleave="switchADetail(0,index)">
                            <div class="flex">
                                <p :style="detail_n === index ? 'color:#ffffff !important;':''">{{"0"+(index+1)}}</p>
                                <div class="atext">
                                    <p class="atitle"  :style="detail_n === index ? 'color:#ffffff !important;':''">{{item.achievement_title.slice(0,10)}}</p>
                                    <p class="acontent"  :style="detail_n === index ? 'color:#ffffff !important;':''">{{item.achievement_content.slice(0,13)+"..."}}</p>
                                </div>
                            </div>
                            <img src="@/assets/right_arrow_white.png" alt="" @click="changeDetail(index)">
                        </div>
                    </el-row>
                </el-col>
                <el-col :span="1"  style="margin:0 10px"></el-col>
                <el-col :span="12">
                    <div class="detail">
                        <p class="dtitle">{{detail.achievement_title}}</p>
                        <p class="dcontent">{{detail.achievement_content.slice(0,80)+"..."}}</p>
                        <el-button type="primary" round>查看详情</el-button>
                        <div><img class="background" src="@/assets/bg_1.jpg" alt=""></div>
                    </div>
                </el-col>
            </el-row>
            <div class="select flex">
                <div v-for="item in [0,1,2,3]" :key="item">
                    <img src="@/assets/select.png" alt="" v-if="order===item" @click="switchAchievement(item)">
                    <img src="@/assets/unselect.png" alt="" v-else @click="switchAchievement(item)">
                </div>
            </div>
        </div>
        
        <div class="entry center">
            <div class="part_title center">
                <p class="chinese">快速入口</p>
                <p class="english">Fast Entrance</p>
                <div class="separator"></div>
            </div>
            <el-row type="flex" justify="center" v-for="(item,index) in entry" :key="index">     
                <el-col :span="3" v-for="(i,n) in item" :key="n">
                    <div class="singleEntry">
                        <div :style="(e_n === n && e_index === index) ? 'background: rgba(0, 96, 255, 0.78)' : 'background: rgba(0,0,0,0.3);'" 
                            @mouseover="changeEntryBg(1,index,n)" @mouseleave="changeEntryBg(0,index,n)" class="shadow">
                            <div class="icon"><i :class="icon[index][n]"></i></div>
                            <p>{{i}}</p>
                            <el-button round size="mini">点击进入<i class="el-icon-right"></i></el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <bottom/>
    </div>
</template>

<script>
import navs from "@/layout/navs.vue"
import background from "@/layout/background.vue"
import bottom from "@/layout/bottom.vue"
import {get} from "@/utils/http"

export default {
    data() {
        return{
            news: [],
            pageNum: 1,
            pageSize: 4,
            achievements: [],
            order: 0,
            detail: {},
            e_index: -1,
            e_n: -1,
            detail_n: 0,
            detail_m: 0,
            entry: [["首页","关于实验室","学术委员会","研究团队","研究方向"],["科研成果","产学研项目合作","合作交流","新闻公告","联系我们"]],
            icon: [
                [
                    "el-icon-s-home",
                    "el-icon-s-platform",
                    "el-icon-s-custom",
                    "el-icon-user-solid",
                    "el-icon-edit-outline"
                ],
                [
                    "el-icon-trophy",
                    "el-icon-menu",
                    "el-icon-s-cooperation",
                    "el-icon-news",
                    "el-icon-phone-outline"
                ]
            ]
        }
    },
    components: {
        navs,
        background,
        bottom
    },
    created() {
        this.getNews();
        this.getAchievement(1,5);
    },
    methods: {
        getNews() {
            get("/news_bulletin/page?pageNum="+this.pageNum +"&pageSize="+this.pageSize)
            .then(res=>{
                this.news = res.data.records;
            })
        },
        getAchievement(pageNum,pageSize) {
            get("/achievement/page?pageNum="+pageNum +"&pageSize="+pageSize)
            .then(res=>{
                this.achievements = res.data.records;
                this.detail = this.achievements[0];
                this.detail_n = 0;
                this.detail_m = 0;
                console.log(this.achievements)
            })
        },

        switchAchievement(item) {
            this.order = item;
            this.getAchievement(item+1,5);
        },
        switchADetail(i,item) {
            if(i == 1) {
                this.detail_n = item;
            }else {
                this.detail_n = this.detail_m;
            }
        },
        changeDetail(index) {
            this.detail = this.achievements[index];
            this.detail_n = index;
            this.detail_m = this.detail_n;
        },
        switchNews(i) {
            if(i === 0) {
                this.pageNum -= 1;
                if(this.pageNum == 0) this.pageNum = 4;
            }else {
                this.pageNum += 1;
                if(this.pageNum == 5) this.pageNum = 1;
            }
            this.getNews();
            console.log(this.pageNum)
        },

        changeEntryBg(i,index,n) {
            if(i === 1) {
                this.e_index = index;
                this.e_n = n;
            }else {
                this.e_index = -1;
                this.e_n = -1;
            }
        }
    }
}
</script>

<style lang="less" scoped>

.index {
    .part_title {
        font-size: 18px;
        font-weight: 400;
        color: #0069AA;
        line-height: 21px;
        width: 400px;
        margin: auto;
        .chinese {
            padding: 80px 0 16px 0;
        }
        .english {
            font-size: 29px;
            font-family: DFPSongW9-GB5;
            color: #222222;
        }
        .separator {
            height: 1px;
            width: 40px;
            background: black;
            opacity: 0.5;
            margin: 14px 185px 30px 185px;
        }
    }
    .news {
        .single_new {
            background-image: url("@/assets/bg_1.jpg");
            height: 400px;
            position: relative;
            &>div {
                position: absolute;
                bottom:8px;
                left: 0;
                right: 0;
                background: #ffffff;
                padding: 10px;
                .ntitle {
                    font-size: 16px;
                    font-weight: bold;
                    color: #333333;
                    line-height: 18px;
                    margin-bottom: 10px;
                }
                .ncontent {
                    font-size: 14px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 16px;
                    margin-bottom: 15px;
                }
            }
            .flex {
                color: #999999;
                font-size: 12px;
                &>div>.time {
                    height: 12px;
                    margin: 3px 5px 0 0;
                }
                &>.right_arrow {
                    width: 24px;
                    height: 18px;
                }
            }
        }
        .switch {
            width: 140px;
            margin: auto;
            img {
                width: 25px;
                margin: 40px 22px 32px 22px;
            }
        }
    }
    .achievement {
        background: #FAFAFA;
        padding-bottom: 46px;
        .single_achievement {
            padding: 20px 16px 15px 26px;
            background: #ffffff;
            &>div>p {
                font-size: 36px;
                font-family: STLiti;
                font-weight: 400;
                color: #666666;
                margin-right: 18px;
            }
            .acontent,.atitle {
                font-size: 16px;
                font-weight: 400;
                color: #666666;
                line-height: 24px;
                margin-right: 18px;
            }
            .acontent {
                font-size: 13px;
            }
            &>img {
                width: 19px;
                height: 19px;
                padding-top: 12px;
            }
        }
        .detail {
            text-align: left;
            .background {
                width: 80%;
                height: 260px;
                margin-top: 21px;
            }
            .dtitle,.dcontent {
                font-size: 20px;
                font-weight: 400;
                color: #333333;
                margin: 12px 0 18px 0;
                height: 46px;
            }
            .dcontent {
                font-size: 18px;
                color: #999999;
                line-height: 24px;
            }
        }
        .select{
            margin: auto;
            width: 208px;
            &>div>img {
                width: 20px;
                height: 20px;
                margin: 50px 16px 0 16px;
            }
        }
    }
    .entry {
        color: #ffffff;
        margin-bottom: 78px;
        .singleEntry {
            background-image: url("@/assets/bg_1.jpg");
            .shadow {
                padding: 15px 0 22px 0;
                &>p {
                    font-size: 14px;
                    margin-bottom: 10px;
                }
            }
            
        }
        .icon {
            border-radius: 100%;
            background: RGBA(31, 58, 104, 1);
            padding: 6px ;
            width: 32px;
            height: 32px;
            margin: auto;
            margin-bottom: 9px;
            font-size: 20px;
            &>i {
                margin-top: 6px;
            }
        }
    }
}

</style>
